<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="600"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-form label-width="150px" :model="form" :rules="rules" ref="formRef">
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('business.charger.gun.parkingId')" prop="parkingId">
            <el-select clearable style="width: 100%" v-model="form.parkingId" :placeholder="t('business.charger.gun.placeholder.parkingId')">
              <el-option v-for="item in parkingRefs" :key="item.id" :disabled="item.disabled" :label="`${item.name[appStore.appLanguage]}`" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{t('crud.cancelText')}}</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="state.loading">{{t('crud.confirmText')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import { bindParking, optionSelect } from '@/api/business/chargerGun'
import {FormInstance, FormRules} from 'element-plus'
import {useI18n} from 'vue-i18n'
import useAppStore from '@/store/modules/app'


const appStore = useAppStore()

const { t } = useI18n()

const emits = defineEmits(['success'])

const formRef = ref<FormInstance>()
const parkingRefs = ref<any[]>([])
const chargerRef = ref<any>()
const chargerGunRef = ref<any>()

const state = reactive({
  visible: false,
  loading: false,
  title: t('business.charger.gun.action.bindParking'),
})

const form = ref<any>({
  parkingId: '',
  id: '',
})

const rules = reactive<FormRules>({})

const openDialog = (parkings:any, gun?: any, charger?:any) => {
  state.visible = true
  chargerRef.value = charger
  chargerGunRef.value = gun
  parkingRefs.value = parkings

  form.value.id = gun.id
  form.value.parkingId = gun.parkingId

  loadChargerGunList()

}

const handleClose = () => {
  state.visible = false
}

const loadChargerGunList = () =>{
  optionSelect({
    stationId: chargerRef.value.stationId
  }).then((res) => {
    let bindParkingId:any[] = []
    res.data.forEach((item:any)=>{
      if(item.parkingId) {
        bindParkingId.push(item.parkingId)
      }
    })

    parkingRefs.value.forEach((item)=>{
      if(bindParkingId.includes(item.id) && chargerGunRef.value.parkingId != item.id) {
        item.disabled = true
      } else {
        item.disabled = false
      }
    })
  })
}

const handleSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      state.loading = true
      let params = form.value
      await bindParking(params).finally(() => (state.loading = false))
      ElMessage.success(t('operate.tooltip.success'))
      handleClose()
      emits('success', params)
    }
  })
}

const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})
</script>
